<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>购物车案例【熊尧仿写】</title>
    <link rel="icon" href="pic.ico">
    <style>

        .shopping-cart {

                height:34px;
                background-color:#f9f9f9;
                margin-right:500px;
                float:right;
                border:1px solid #dfdfdf;
                color:#666666;
                font-size:14px;
                line-height:34px;
                padding:0 20px 0 19px;
                position:relative;
                text-align:center;
                cursor:pointer;

                }
        .shopping-cart .cart-ico{
                width:16px;
                height:13px;
                margin-right:10px;
                display:inline-block;
                background-image:url("images/icos.png");
                background-position:-1px -59px;

                }
        .shopping-cart .count{
                width:16px;
                height:14px;
                text-align:center;
                color:#fff;
                line-height:14px;
                position:absolute;
                font-style:normal;
                border-radius:7px 7px 7px 0;
                font-size:12px;
                background-color:red;
                top:-5px;
				right:17px;
                }
        .shopping-cart .gt{
				font-family:'sonti';
				font-style:normal;
				margin-left:10px;
				}
        .shopping-cart:hover {

                background-color:white;

        }
        .shopping-cart .count:hover{
                background-color:white;
                color:red;
                border:1px solid red;

        }
         .shopping-cart .spacer{
        width:161px;
        height:20px;
        background-color:white;
        position:absolute;
        top:30px;
        right:0px;
        display:none;
        z-index:2;
        }
        .shopping-cart .down{
        width:280px;
        height:50px;
        position:absolute;
        background-color:#fff
        top:35px;
        right:-1px;
        border:1px solid #dfdfdf;
        text-align:center;
        line-height:50px;
        background-image:url("images/settleup-nogoods.png");
        background-repeat:no-repeat;
        background-position:15px center;
        padding:0 16px 0 80px;
        z-index:1;
        display:none;
        }
    .shopping-cart:hover .down{
    display:inline-block;
    }
    .shopping-cart:hover .spacer{
    display:inline-block;
    }

    </style>
</head>
<body>

    <div class="shopping-cart">

        <i class="cart-ico"></i>
          <a>我的购物车</a>
        <em class="count">0</em>
        <i class="gt">&gt;</i>
        <div class="spacer"></div>
        <div class="down">
            <span> 购物车里面还没有东西哟，赶快去购物吧！！</span>
        </div>
    </div>
</body>
</html>